<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商城首页</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
    <meta content="yes" name="apple-mobile-web-app-capable">     
    <meta content="black" name="apple-mobile-web-app-status-bar-style">     
    <meta content="telephone=no" name="format-detection">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/H5/css/sm.min.css">
    <link rel="stylesheet" href="/H5/css/reset.css">
    <link rel="stylesheet" href="/H5/css/mall.css?v=7">
</head>
<body>
	<div class="page-group ms-controller" :controller="mall">
        <div class="page page-current">
            <header class="bar bar-nav">
              	<a class="icon icon-left pull-left" href="javascript:window.history.go(-1);"></a>
              	<a class="icon icon-home pull-right" href="/H5"></a>
              	<h1 class="title">精品商城</h1>
            </header>
            <div class="content">
    	        <div class="banner">
                    <ul>
                        <li :for="el in @banner"><a :attr="{'href': el.link_url}" style="display:block; background-color: #eee; width:100%; height: 100%;">
                            <img :attr="{'src': el.pic_path}" width='100%' height="100%" onerror="$(this).css('display','none')" alt="">
                        </a></li>
                    </ul>
    	        </div>
    	        <div :for="el in @goods">
    				<div class="type">
    					<div class="jp">{{el.label}}</div>
    				</div>
    				<div class="goods-list">
    					<ul>
    						<li :for="el in el.list">
    							<a :css="{'background-image': el.list_cover?'url('+el.list_cover+')':'#eee'}" :attr="{'href': '/H5/detail?id='+el.id}" class="goods">
    								<div class="list-right">
    									<div class="list-right-top">
    										<p>{{el.title}}</p>
    										<span>{{el.intro}}</span>
    									</div>
    									<div class="list-right-bottom">
    										<p>￥{{el.sell_price}}<span class="cart">立即购买</span></p>
    										<span ><span :if="el.give_point>0" class="left" style="color: #4cd964; border-color: #4cd964">赠送积分</span><span class="glay" :if="el.give_point>0">+{{el.give_point}}</span><span :if="el.deviation_point>0" class="left">抵扣积分</span><span class="glay" :if="el.deviation_point>0">-{{el.deviation_point}}</span></span>
    										<span class="xl"><span class="right">销量</span><span class="glay">{{el.sell_num}}</span></span>
    									</div>
    								</div>
    							</a>
    						</li>
    					</ul>
    				</div>
    	        </div>
            </div>
        </div>
    </div>
	<script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/mall.js?v=10' charset='utf-8'></script>
    <script>
    	var timer;
		var mall = avalon.define({
		    $id: "mall",
		    banner:[],
		    picture_urls: "",
		    goods:[],
		    getMallHome: function(){
		        Mall.request( "/api/MallHome", {page_size: 5} )
		            .always( function( data ){
		                if( data.error_code == 0 ){
		                    mall.banner = data.data.banner;
		                    mall.goods = data.data.goods;
		                    if( data.data.banner.length > 1 ){
		                    	if(data.data.banner.length == 2){
		                    	    var datas = data.data.banner;
		                    	    datas.push( data.data.banner[0] );
		                    	    mall.banner = datas;
		                    	}
		                    	function autoRoll(){
		                    	    $( ".banner ul" ).animate({"margin-left": "-200%"}, 300, "linear",function(){
		                    	        $($(".banner ul li")[0]).remove().clone().appendTo(".banner ul" );
		                    	        $( ".banner ul" ).css({"margin-left": "-100%"});
		                    	    })
		                    	}
		                    	timer = setInterval( function(){autoRoll();}, 3000 );
		                    	function swipe( k ){
		                    	    timer && clearInterval( timer );
		                    	    if( k == "left" ){
		                    	        $(".banner ul").animate({"margin-left": "-200%"},300,"linear",function(){
		                    	            $($(".banner ul li")[0]).remove().clone().appendTo(".banner ul" );
		                    	            $(".banner ul").css({"margin-left": "-100%"});
		                    	            timer = setInterval( function(){autoRoll();}, 3000 )
		                    	        })
		                    	    }
		                    	    else{
		                    	        $(".banner ul").animate({"margin-left": 0},300,"linear",function(){
		                    	            $($(".banner ul li")[$(".banner ul li").length-1]).remove().clone().prependTo(".banner ul" );
		                    	            $(".banner ul").css({"margin-left": "-100%"});
		                    	            timer = setInterval( function(){autoRoll();}, 3000 )
		                    	        })
		                    	    }
		                    	}
		                    	$(".banner ul").swipeLeft( function(){
		                    	    swipe( "left" );
		                    	} )
		                    	$(".banner ul").swipeRight( function(){
		                    	    swipe();
		                    	} )
		                    }
		                    avalon.scan( document.body );
		                }
		            } )
		    },
		    info: function(){
		    	Mall.request( "/api/UserInfo" )
		    	    .always( function( data ){
		    	        if( data.error_code == 0 ){
		    	            if( !data.data.real_name ){
		    	                // $.alert( "您未设置过会员信息,请点击确定前往设置", function(){
		    	                //     window.location.href="/H5/memberperfect";
		    	                // } )
		    	            }
		    	        }
		    	        else{
		    	        	if( data.error_code == 10000 ){
		    	        		window.location.href="/H5/login";
		    	        	}
		    	        }
		    	    } )
		    }
		})
		mall.info();
		mall.getMallHome();
    </script>
</body>
</html>